<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="static/css/mui.min.css" rel="stylesheet" />
		<link href="static/css/iconfont.css" rel="stylesheet" />
		<link href="app/main/main.css" rel="stylesheet" />

		<link href="app/contacts/contacts.css" rel="stylesheet" />

		<style>
			.mui-backdrop {
				position: fixed;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 998;
				/*background-color: rgba(0, 0, 0, .5);*/
			}
			
			.mui-popover {
				display: none;
				position: fixed;
				width: 80%;
				height: auto;
				border-radius: 5px;
				left: 50%;
				top: 45%;
				margin: 0 auto;
				z-index: 9999;
				background-color: #fff;
				-webkit-transform: translateX(-50%) translateY(-50%);
				-moz-transform: translateX(-50%) translateY(-50%);
				-ms-transform: translateX(-50%) translateY(-50%);
				transform: translateX(-50%) translateY(-50%);
			}
			
			.mui-popover>li {
				height: 60px;
				padding-top: 15px;
			}
			
			.mui-popover>li>a>span {
				color: #8f8f94;
				float: right;
				font-size: 14px;
			}
			
			.mui-table-view-cell {
				background: #393939;
			}
			
			.mui-table {
				background-color: #393939;
			}
			
			.mui-badge,
			.mui-media-body {
				color: #FFFFFF;
			}
			
			.mytime {
				color: #cecece !important;
			}
			
			.mui-control-item {
				color: #7c7c7c !important;
			}
			
			.mui-active {
				color: #ceb98c !important;
				border-bottom-color: #ceb98c !important;
			}
			
			.friend-searchbox {
				width: 100%;
				margin: 10px 0px 0px 0px;
				padding: 10px 0px;
			}
			
			.friend-search {
				width: 92%;
				margin-left: 4%;
				border-bottom: 1px solid #7c7c7c;
			}
			
			.friend-search input {
				border: none;
				width: 80%;
				height: 40px;
				float: left;
				padding: 0px;
				margin: 0px;
			}
			
			.friend-search span {
				float: left;
				color: #7c7c7c;
				font-size: 30px;
				line-height: 40px;
			}
			
			.gz-h3 {
				padding-top: 10px;
				padding-bottom: 10px;
				font-size: 18px;
				text-indent: 1em;
			}
			
			.mui-indexed-list-group {
				background: #ceb98c;
				color: #000;
			}
			
			.gz-myfind {
				position: absolute;
				top: 170px;
				bottom: 54px;
			}
			.friend-searchbox {
				background: none;
			}
			.friend-search input {
				background: #2a2a2a;
			}
			.mui-segmented-control .mui-control-item{
				position: relative;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" style="background: #2a2a2a;">
			<div style="padding: 10px 10px;">
				<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
					<a class="mui-control-item mui-active" href="#item1" lang>
						消息
					</a>
					<a class="mui-control-item" href="#item2">
						<font lang>好友</font><span id="hasmsg2" class="hasmsg" style="display: none;"></span>
					</a>
					
				</div>
			</div>
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll" style="padding-bottom: 50px;">
							<ul id="chat-area" class="mui-table-view">

							</ul>
						</div>
					</div>

					<script id="chat-templete" type="text/template">
						<% for(var i in mainlist){ var item=mainlist[i]; %>
						<li class="mui-table-view-cell mui-media " title="<%=(item.name)%>" msgnum="<%=(item.msgnum)%>" room_id='<%=(item.key)%>' data_id='<%=(item.id)%>' istop='<%=(item.istop)%>' room-type="<%=(item.ctype)%>">
							<div class="mui-slider-handle">
								<div class="mui-table">
									<div class="mui-table-cell mui-col-xs-10">
										<img class="mui-media-object mui-pull-left" src="<%=(item.avatar)%>">
										<% if(item.msgnum > 0) { %>
										<span class="mui-badge"><%=(item.msgnum)%></span>
										<% } %>
										<div class="mui-media-body">
											<!--<%=(item.f_id)%>:-->
											<%=(item.name)%>
											<p class="mui-ellipsis">
												<%=(item.msg)%>
											</p>
										</div>
									</div>
									<div class="mui-table-cell mui-col-xs-2 mui-text-right">
										<span class="mui-h5 mytime"><%=(item.show_time)%></span>

									</div>
								</div>
							</div>
						</li>

						<% } %>
					</script>

				</div>
				<div id="item2" class="mui-control-content">
					<!--内容-->

					<div id='list' class="mui-indexed-list">
						<div class="mui-indexed-list-inner">

							<ul class="mui-table-view" id="tophrefs">

								<li data-group="↑" class="mui-table-view-cell mui-media">
									<a href="pages/contacts/newfriend.html">
										<div class="mui-media-object mui-pull-left iconfont new-friend">
											&#xe613;
										</div>
										<div class="mui-media-body" lang>
											<font lang>新的朋友</font><span id="hasmsg1" class="hasmsg" style="display: none;"></span>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href="pages/contacts/friendlist.html">
										<div class="mui-media-object mui-pull-left iconfont public">
											&#xe721;
										</div>
										<div class="mui-media-body">
											<font lang>我的朋友</font>
										</div>
									</a>
								</li>
							</ul>
							<div class="friend-searchbox">
								<div class="friend-search">
									<label><span class="mui-icon mui-icon-search"></span></label>
									<input type="text" type="search" id="searchInput" placeholder="名字/手机号" lang />
									<div style="clear:both"></div>
								</div>
							</div>
							<h3 class="gz-h3" lang>邀请新朋友</h3>
							<div id="scroll2" class="mui-scroll-wrapper gz-myfind">
								<div class="mui-scroll">
									<ul id="list-area" class="mui-table-view"></ul>
								</div>
							</div>

						</div>
					</div>
					<script id='list-template' type="text/template">

						<% for(var zimu in flist){ var plist=flist[zimu]; %>

						<li data-group="<%=(zimu)%>" class="mui-table-view-divider mui-indexed-list-group">
							<%=(zimu)%>
						</li>
						<% for(var p in plist){ var item=plist[p]; %>
						<li data-value="<%=(item.pinyin)%>" data-tags="<%=(item.pinyin)%>" class="mui-table-view-cell mui-media">
							<a href="javascript:;" title="<%=(item.name)%>" phone="<%=(item.phone)%>" fid="<%=(item.fid)%>" head="<%=(item.f_avatar)%>">
								<% if(item.f_avatar) { %>
								<img class="mui-media-object mui-pull-left" src="<%=(item.f_avatar)%>" width="35px">
								<% } else { %>
								<img class="mui-media-object mui-pull-left" src="static/images/addfriend_py.png" width="35px">
								<% } %>
								<!--img class="mui-media-object mui-pull-left" src="static/images/1.png"-->
								<div class="mui-media-body">
									<%=(item.name)%>
								</div>
							</a>
						</li>
						<% } %>
						<% } %>
					</script>
					<!--内容end-->
				</div>

			</div>
		</div>
		<!--<div id="pop" class="mui-popover">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					111
				</li>
				<li class="mui-table-view-cell">
					222
				</li>
			</ul>
		</div>-->

		<script src="static/js/mui.js"></script>
		<script src="static/js/arttmpl.js"></script>

		<!--<script src="static/js/mui.indexedlist.js"></script>-->
		<script src="app/public/popover.js"></script>
		<script src="static/js/mui.enterfocus.js"></script>
		<script src="static/js/md5.min.js"></script>
		<script src="static/js/localforage.js"></script>
		<script src="app/config.js"></script>
		<script src="lang/main.js"></script>
		<script src="lang/chat.js"></script>
		<script src="static/js/common.js"></script>
		<!--script src="static/js/socket.io.js"></script-->
		<script src="app/chat/chat.js"></script>
		<script src="app/chat/index_list.js"></script>
		<!--New-->

		<script src="app/contacts/phone.js"></script>
		<script src="app/contacts/contacts.js"></script>

		<script>
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
				$('#scroll2').scroll({
					indicators: true //是否显示滚动条
				});

			})(mui);
		</script>
	</body>

</html>